<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html style="width: 100%;height: 100%;">

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_webPrinting_landUse"></title>
    <script type="text/javascript" include="bootstrap,jquery" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>

    <style>
        .sidebar-config-wrap {
            position: absolute;
            top: 0;
            left: 0;
            height: 100vh;
            width: 360px;
            padding: 20px;
            background: #2c2c2c;
        }

        .sidebar-config-wrap .panel-group .panel {
            border-color: transparent;
            background: transparent;
            color: rgba(255, 255, 255, 0.6);
        }

        .sidebar-config-wrap .panel .panel-heading {
            background: #383838;
            color: rgba(255, 255, 255, 0.85);
            border-color: #383838;
            position: relative;
        }

        .sidebar-config-wrap .panel .panel-heading::before {
            content: "";
            height: 50%;
            width: 2px;
            background: #3394dc;
            position: absolute;
            top: 25%;
            left: 0;
            display: block;
        }

        .form-group {
            overflow: hidden;
        }

        .sidebar-config-wrap .form-control,
        .sidebar-config-wrap .btn-group {
            width: 70%;
            float: right;
        }

        .sidebar-config-wrap .form-group label {
            margin-bottom: 0;
            line-height: 34px;
        }

        .sidebar-config-wrap .btn-group {
            display: block;
            margin-bottom: 10px;

        }

        .sidebar-config-wrap .btn-group button {
            width: 50%;
            outline: none;
        }

        .sidebar-config-wrap .btn-group button:focus {
            outline: none;
        }

        .sidebar-config-wrap .panel-title a {
            width: 100%;
            display: block;
            text-decoration: none !important;
            overflow: hidden;
        }

        .sidebar-config-wrap .panel-title a span.glyphicon  {
            float: right;
        }

        .sidebar-config-wrap .panel-title a[aria-expanded="true"] .glyphicon-chevron-down {
            display: none;
        }

        .sidebar-config-wrap .panel-title a[aria-expanded="false"] .glyphicon-chevron-up {
            display: none;
        }

        .sidebar-config-wrap .submit-btn-wrap {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80px;
            line-height: 80px;
            border-top: 2px solid #323232;
            text-align: center;
        }

        .sidebar-config-wrap #printBtn,
        .sidebar-config-wrap .progress {
            width: 80%;
        }

        .sidebar-config-wrap .progress {
            margin: 30px auto 0;
        }
    </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height: 100%">
    <div id="map" style="width: 100%;height:100%"></div>
    <form id="printForm" class="sidebar-config-wrap" role="form">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                            aria-expanded="true" aria-controls="collapseOne">
                            <span data-i18n="resources.text_baseInfo"></span>
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="templateName" data-i18n="resources.text_layoutTemplates"></label>
                            <select class="form-control" id="templateName">
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="title" data-i18n="resources.text_title"></label>
                            <input type="text" class="form-control" id="title"
                                data-i18n="[value]resources.title_mvtVectorLayer_mapboxStyle_landuse" />
                        </div>
                        <div class="form-group">
                            <label for="subTitle" data-i18n="resources.text_subTitle"></label>
                            <input type="text" class="form-control" id="subTitle" />
                        </div>
                        <div class="form-group">
                            <label for="copyright" data-i18n="resources.text_copyRightInfo"></label>
                            <input type="text" class="form-control" id="copyright" />
                        </div>
                        <div class="form-group">
                            <label for="author" data-i18n="resources.text_author"></label>
                            <input type="text" class="form-control" id="author" value="北京超图软件股份有限公司" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                            href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            <span data-i18n="resources.text_littleMap"></span>
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="scale" data-i18n="resources.text_scale"></label>
                            <input type="text" class="form-control" id="scale" value="1" />
                        </div>
                        <div class="form-group">
                            <label for="center"  data-i18n="resources.text_center"></label>
                            <input type="text" class="form-control" id="center" data-i18n="[title]resources.text_centerTip" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="scaleOptions">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                            href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                            <span data-i18n="resources.text_scale"></span>
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </a>
                    </h4>
                </div>
                <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="scaleOptions">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="scaleText" data-i18n="resources.text_scaleText"></label>
                            <input type="text" class="form-control" id="scaleText" />
                        </div>
                        <div class="form-group">
                            <label for="type" data-i18n="resources.text_style"></label>
                            <select class="form-control" id="type">
                                <option value="LINE">line</option>
                                <option value="BAR" selected>bar</option>
                                <option value="BAR_SUB">bar_sub</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="intervals" data-i18n="resources.text_intervals"></label>
                            <input type="text" class="form-control" id="intervals" />
                        </div>
                        <div class="form-group">
                            <label for="unit" data-i18n="resources.text_unit"></label>
                            <select class="form-control" id="unit">
                                <option value="METER" data-i18n="resources.option_meterUnit"></option>
                                <option value="FOOT" data-i18n="resources.option_mileUnit"></option>
                                <option value="DEGREES" data-i18n="resources.option_degreeUnit"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="exportOptions">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                            href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                            <span data-i18n="resources.text_exportOptions"></span>
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </a>
                    </h4>
                </div>
                <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="exportOptions">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="format" data-i18n="resources.text_format">格式</label>
                            <select class="form-control" id="format">
                                <option value="PDF">PDF</option>
                                <option value="PNG">PNG</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="dpi">DPI</label>
                            <input type="text" class="form-control" id="dpi" value="96" />
                        </div>
                        <div class="form-group">
                            <label for="exportScale" data-i18n="resources.text_scale"></label>
                            <input type="text" class="form-control" id="exportScale" value="1" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="submit-btn-wrap">
            <button type="submit" class="btn btn-primary" id="printBtn" data-i18n="resources.text_print"></button>
            <div class="progress">
                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100"
                    aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                    printing...
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript" include="bootstrap,jquery" src="../js/include-web.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var webMap = new ol.supermap.WebMap(1887887232, {
            target: 'map',
            server: 'https://www.supermapol.com',
            successCallback: function (map) {
                $('#center').val(map.getView().getCenter().join(','));
                var res = map.getView().getResolution();
                var scale = ol.supermap.CommonUtil.getScaleFromResolutionDpi(res, 96, map.getView().getProjection().getUnits());
                $('#scale').val(scale * 2);
                $('#exportScale').val(scale);
            }
        });
        var webPrintingJobService = new ol.supermap.WebPrintingJobService(host + '/iserver/services/webprinting/rest/webprinting/v1', {
            withCredentials: window.isLocal
        });
        webPrintingJobService.getLayoutTemplates(function (e) {
            e.result.forEach(function(item){
                $('#templateName').append('<option value='+item.templateName+'>'+item.templateName+'</option}');
            });
        });

        $('.progress').hide();
        $('#printForm').on('submit', printMap);
        function printMap(e) {
            e.preventDefault();
            $('#printBtn').hide();
            $('.progress').show();
            var params = new ol.supermap.WebPrintingJobParameters({
                content: new ol.supermap.WebPrintingJobContent({
                    type: "WEBMAP",
                    url: "https://www.supermapol.com/web/maps/1887887232/map.json"
                }),
                layoutOptions: new ol.supermap.WebPrintingJobLayoutOptions({
                    templateName: $('#templateName').val(),
                    title: $('#title').val(),
                    subTitle: $('#subTitle').val(),
                    author: $('#author').val(),
                    copyright: $('#copyright').val(),
                    scaleBarOptions: new ol.supermap.WebPrintingJobScaleBarOptions({
                        scaleText: $('#scaleText').val(),
                        type: $('#type').val(),
                        intervals: $('#intervals').val(),
                        unit: $('#unit').val(),
                    }),
                    littleMapOptions: new ol.supermap.WebPrintingJobLittleMapOptions({
                        scale: +$('#scale').val(),
                        center: { x: $('#center').val().split(',')[0], y: $('#center').val().split(',')[1] },
                        layerNames: webMap.layers && webMap.layers.map(function(item) {return item.name})
                    }),
                    legendOptions: new ol.supermap.WebPrintingJobLegendOptions({
                        picAsBase64: ""
                    })
                }),
                exportOptions: new ol.supermap.WebPrintingJobExportOptions({
                    format: $('#format').val(),
                    dpi: +$('#dpi').val(),
                    scale: +$('#exportScale').val()
                })
            });
            filterEmptyData(params);
            webPrintingJobService.createWebPrintingJob(params, function (e) {
                if (e.result && e.result[0] && e.result[0].path) {
                    webPrintingJobService.getPrintingJob(e.result[0].resourceConfigID, function ( res ) {
                        if (res.result && res.result.status === 'FINISHED') {
                            let link = document.createElement('a');
                            link.href = res.result.result.downloadUrl;
                            link.download = 'supermap-webprinting-report.pdf';
                            link.target = '_blank';
                            link.click();
                            // 释放内存
                            window.URL.revokeObjectURL(link.href);
                            $('#printBtn').show();
                            $('.progress').hide();
                        } else if (!res.result) {
                            alert('打印失败');
                            $('#printBtn').show();
                            $('.progress').hide();
                        }
                    });
                } else {
                    alert('打印失败');
                    $('#printBtn').show();
                    $('.progress').hide();
                }
            });
        }
        function filterEmptyData(params) {
            for (let key in params) {
                if (params[key] === undefined) {
                    delete params[key];
                } else if (typeof params[key] === 'object') {
                    filterEmptyData(params[key]);
                    if (JSON.stringify(params[key]) === '{}') {
                        delete params[key];
                    }
                }
            }
        }
        $('#legendBtnGroup').click(function (e) {
            $(this).children(".active").removeClass('active');
            $(e.target).addClass('active');
            $(this).attr('aria-active', e.target.getAttribute('id'));
        });
    </script>
</body>
